<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
    }
  </style>
  <!-- display: flex;justify-content: space-between; -->
</head>

<body>
  <h2>布局1：左中右，文字居中</h2>
  <div style="clear: both;">
    <p style="float: left;width: 33.33%;text-align: center;">
      我是左边 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta a vel eveniet, similique laborum ab explicabo ipsam reprehenderit tenetur soluta. Pariatur quaerat quos maxime accusamus non, assumenda sunt quasi eveniet.
    <p style="float: right;width: 33.33%;text-align: center;">
      我是右边
    </p>
    <p style="text-align: center;">
      我是中间
    </p>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div>
    <p style="float: left;width: 33.33%;">
      我是左边 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis debitis eveniet cupiditate, temporibus laudantium hic rerum ab ad dicta at. Possimus, veniam laboriosam. Enim adipisci doloribus, excepturi inventore in eaque.
    <p style="float: right;width: 33.33%;text-align: right;">
      我是右边
    </p>
    <p style="text-align: center;">
      我是中间
    </p>
    <div style="clear: both;"></div>
  </div>
  <p>333333333333333 Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio assumenda aspernatur nisi adipisci qui numquam molestiae vel reiciendis? Voluptatem nihil aspernatur eveniet voluptatibus dignissimos officia harum amet tempore possimus perferendis!</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h2>布局2：左中右</h2>
  <div>
    <p style="float: left;width: 33.33%;">
      我是左边 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur accusantium dolor explicabo iure exercitationem corrupti modi, id unde magni repellat. Saepe, et ad sed minima ratione atque. Ducimus, excepturi sit?
    <p style="float: right;width: 33.33%;">
      我是右边
    </p>
    <p>
      我是中间
    </p>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h2>布局3：左中右居中</h2>
  <div style="display: flex;justify-content: space-between; align-items: center; ">
    <div>
      <img src="./add.png" alt="">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam accusantium repellat quod minima quia esse incidunt blanditiis repellendus velit cumque sunt iure, aliquam beatae. Reprehenderit voluptas corporis sit repellat voluptatem?
    </div>
    <p>
      我是中间
    </p>
    <p>
      我是右边
    </p>
  </div>

  <h2>布局3：左中右居中</h2>
  <div style="display: flex;justify-content: space-between; align-items: center; ">
    <div>
      <img src="./add.png" alt="">
    </div>
    <p>
      我是中间
    </p>
    <p>
      我是右边
    </p>
  </div>
  <script>
    function a(params) {
      let data = 12
      try {
        if (data > 100) {
          throw ('数据大于100')
        }
        console.log('sssss');
        return 'ddd'
      } catch (error) {
        console.log(error);
      } finally {
        console.log('finally');
        return 'bbb'
      }
    }
    let b = a()
    console.log(b, 'ddddddddddd');
  </script>
</body>

</html>